.progress {
    display: flex;
    overflow: hidden;
    height: 1rem;
    border-radius: 100vw;
    background-color: lighten($active_theme, 2.5%);
    box-shadow: inset 0 1px 2px rgba($black, 0.1);
}

.progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease;
    white-space: nowrap;
    color: $white;
    background-color: $blue;
    box-shadow: inset 0 -1px 0 rgba($black, 0.15);
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }

    to {
        background-position: 0 0;
    }
}

.progress-striped .progress-bar,
.progress-bar-striped {
    background-image: $progress-bars;
    background-size: 40px 40px;
}

.progress.active .progress-bar,
.progress-bar.active {
    animation: progress-bar-stripes 1.5s linear infinite;
}
